<template>
  <div class="entrySchoolForm">
    <div class="form-operate">
        <!--<div class="form-filter">
        <div class="form-filter-selector">
          <el-form ref="form" v-model="form" label-width="64px">
            <el-form-item label="筛选:">
              <el-select v-model="filter"  v-on:change="filterChanger" width="200px;" placeholder="全部">
                <el-option label="全部" :value='-1' :key='-1' lable="-1"></el-option>
                <el-option label="未审批" :value=0 :key=0 lable="0"></el-option>
                <el-option label="审批通过" :value=1 :key=1 lable="1"></el-option>
                <el-option label="审批不通过" :value=2 :key=2 lable="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="form-filter-search">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="search"
          >
          </el-input>
          <el-button type="primary" v-on:click="searchTable">搜索</el-button>
        </div>
      </div>-->
      <div class="operate-right">
        <el-button type="success" v-on:click="manyStateUpdate">新增</el-button>
        <el-button type="info" v-on:click="importExcel">导入</el-button>
        <el-button type="danger" v-on:click="exportExcel">导出</el-button>
        <el-button type="warning " v-on:click="manyRowDelete">批量删除</el-button>
       <!-- <el-button>导出</el-button>-->
      </div>
    </div>
    <div class="huadi-table">
      <el-table
        v-loading=""
        ref="multipleTable"
        tooltip-effect="dark"
        :data="ctableData"
        @select="tableSelection"
        @select-all="tableAllSelection"
        :header-row-style=headerStyle
        style="width: 100%">
        <el-table-column
          header-align="center"
          type="selection"
        >
        </el-table-column>
        <el-table-column  width="50"
          prop="id"
          label="序号"
          header-align="center"
        >
        </el-table-column>
        <el-table-column width="100"
          prop="owner"
          header-align="center"
          label="货主">
        </el-table-column>
        <el-table-column width="100"
          prop="code"
          header-align="center"
          label="料号">
        </el-table-column>
        <el-table-column  width="500"
          prop="ms"
          header-align="center"
          label="描述">
        </el-table-column>
        <el-table-column
          prop="kq"
          header-align="center"
          label="库区">
        </el-table-column>
        <el-table-column
          prop="saveAttribute"
          header-align="center"
          label="存储属性">
        </el-table-column>
        <el-table-column width="150"
          prop="kw"
          header-align="center"
          label="库位">
        </el-table-column>
        <el-table-column  width="300"
          prop="lpn"
          header-align="center"
          label="LPN">
        </el-table-column>
        <el-table-column  width="250"
          prop="iseccn"
          header-align="center"
          label="是否ECCN">
        </el-table-column>
        <el-table-column width="150"
          prop="iscb"
          header-align="center"
          label="是否叉板">
        </el-table-column>
        <el-table-column width="200"
          prop="ljCode"
          header-align="center"
          label="09码">
        </el-table-column>
        <el-table-column width="150"
          prop="madeTime"
          header-align="center"
          label="制造日期">
        </el-table-column>

        <el-table-column width="150"
          prop="dc"
          header-align="center"
          label="DC">
        </el-table-column>
        <el-table-column width="150"
          prop="reciveTime"
          header-align="center"
          label="收货日期">
        </el-table-column>
        <el-table-column width="300"
          prop="supilerName"
          header-align="center"
          label="供应商全称">
        </el-table-column>
        <el-table-column width="150"
          prop="suppilerCode"
          header-align="center"
          label="供应商代码">
        </el-table-column>
        <el-table-column width="150"
          prop="lpnxyl"
          header-align="center"
          label="LPN现有量">
        </el-table-column>
        <el-table-column width="150"
          prop="lpnkyl"
          header-align="center"
          label="LPN可用量">
        </el-table-column>
        <el-table-column width="150"
          prop="lpnyfpl"
          header-align="center"
          label="LPN已分配量">
        </el-table-column>
        <el-table-column width="150"
          prop="zt"
          header-align="center"
          label="状态">
        </el-table-column>
        <el-table-column width="150"
           prop="commnet"
           header-align="center"
           label="注释">
         </el-table-column>
         <el-table-column width="150"
          prop="lpniscf"
          header-align="center"
          label="LPN是否拆分">
        </el-table-column>
        <el-table-column width="150"
          prop="erpzk"
          header-align="center"
          label="erp子库">
        </el-table-column>

        <el-table-column width="150"
          prop="endTime"
          header-align="center"
          label="到期日期">
        </el-table-column>
        <el-table-column width="150"
          prop="batch"
          header-align="center"
          label="批次">
        </el-table-column>
        <el-table-column width="150"
          prop="kl"
          header-align="center"
          label="库龄">
        </el-table-column>
        <el-table-column width="150"
          prop="hl"
          header-align="center"
          label="货龄">
        </el-table-column>
        <el-table-column width="150"
          prop="hth"
          header-align="center"
          label="合同号">
        </el-table-column>
        <el-table-column width="150"
          prop="lfId"
          header-align="center"
          label="落放id">
        </el-table-column>
        <el-table-column width="150"
          prop="po"
          header-align="center"
          label="po">
        </el-table-column>
        <el-table-column width="150"
          prop="xh"
          header-align="center"
          label="箱号">
        </el-table-column>
        <el-table-column width="150"
          prop="wlbb"
          header-align="center"
          label="物料版本">
        </el-table-column>
        <el-table-column width="150"
          prop="mxh"
          header-align="center"
          label="模穴号">
        </el-table-column>
        <el-table-column width="300"
          prop="wxtsbq"
          header-align="center"
          label="外箱特殊标签（改善品等类）">
        </el-table-column>
        <el-table-column width="150"
          prop="lockzt"
          header-align="center"
          label="锁定状态">
        </el-table-column>
        <el-table-column width="150"
          prop="employeeId"
          header-align="center"
          label="用户ID">
        </el-table-column>
        <el-table-column width="150"
          prop="lpndtfbl"
          header-align="center"
          label="LPn动态分布量">
        </el-table-column>
        <el-table-column width="150"
          prop="cmdj"
          header-align="center"
          label="潮敏等级">
        </el-table-column>
        <el-table-column
          width="200"
          header-align="center"
          label="操作">
          <template slot-scope="scope">
            <!--<el-button size="mini" type="success" @click="handleChangeStata(scope.row)">审核</el-button>-->
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :total=page.total
        :pageSize=page.pageSize
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog title="审批" width="400px" :visible.sync="dialogFormState">
      <el-form :model="stateform">
      <div class="stata-dialog">
        <el-row>    <el-form-item labelWidth="100px" label="审批">
            <el-select v-model="stateform.state" width="200px;" placeholder="请选择">
              <el-option label="未审批" :value=0 :key=0 lable="0"></el-option>
              <el-option label="审批通过" :value=1 :key=1 lable="1"></el-option>
              <el-option label="审批不通过" :value=2 :key=2 lable="2"></el-option>
            </el-select>
        </el-form-item>
        </el-row>
        <div class="marginDia"></div>
      <el-row>
        <el-form-item label="备注" labelWidth="100px" >
          <el-input type="textarea" width="200px" v-model="stateform.memo"></el-input>
        </el-form-item>
      </el-row>


      </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormState = false">取 消</el-button>
        <el-button type="primary" @click="UpdateStateById">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导入" width="400px" :visible.sync="dialogFormStateAll">
      <!--<el-form :model="stateform">
        <div class="stata-dialog">
          <div class="marginDia"></div>
          <el-row>
            <el-upload :action="uploadActionUrl">
                <el-button size="small" type="primary" @change="tirggerFile($event)">点击上传</el-button>
            </el-upload>
            <el-form-item label="" labelWidth="30px" >
              <el-input type="file" width="200px" name="fileUpload"  id="fileInput" @change="tirggerFile($event)"  ></el-input>
            </el-form-item>
          </el-row>
        </div>
        </el-form>-->
      <form id="upload" method="POST" action="/stock/importExcel"  enctype="multipart/form-data"  >
            <input type="file" name="file" />
            <br/> <br/> <br/>
            <input type="button" @click="submitForm()" value="确定"  style=" background: #2196F3; border-radius: 3px;height: 39px; width: 80px; color: #fff; cursor: pointer;" />
            <el-button @click="dialogFormStateAll = false">取 消</el-button>
      </form>
      <div slot="footer" class="dialog-footer">

        <!--<el-button type="primary" @click="importExcelOk">确 定</el-button>!-->
      </div>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: 'EntrySchoolForm',
    data () {
      return {
          tableSelect:[],
          filter:-1,
          search:"",
        headerStyle: {
          "background-color": '#f5f6fa',
        },
        page: {
          total: 0,
          pageIndex: 0,
          pageSize: 5
        },
        dialogFormState: false,
        dialogFormStateAll:false,
        stateform: {
          id: '',
          state: 0,
          memo: '',
          // false 为不是批量的，true 为批量
          type:false
        },
        tableData: [],
        form: {
          selector: ""
        },
        loading: true,
        uploadActionUrl:"/stock/importExcel",
        file:""
      }
    },
    methods: {
    submitForm(){
          var form = document.getElementById('upload'),
          formData = new FormData(form);
          var _this=this;
          $.ajax({
                 url:"/stock/importExcel",
                 type:"post",
                 data:formData,
                 processData:false,
                 contentType:false,
                 done: function (res) {
                     uxAlert('finish:' + res);
                 },
                 success:function(res){
                     if(res){
                        _this.$notify({
                           title: '成功',
                           message: '上传成功',
                           type: 'success'
                        });
                     }else{
                        _this.$notify({
                           title: '成功',
                           message: '上传失败',
                           type: 'success'
                        });
                     }
                     _this.dialogFormStateAll=false;
                 },
                 error:function(err){
                     _this.$message('网络错误');
                 }

             });
          return false;
    },
      tirggerFile(event){
        alert(1233)
        console.log(event.target)
        //this.file = event.target.files[0];
      },
      importExcelOk(){
         var data = new FormData();//重点在这里 如果使用 var data = {}; data.inputfile=... 这样的方式不能正常上传
         data.append("inputFile",this.file) ;
         data.append("title","thisAGoodTitle");
         console.log(data)
        var url='/stock/importExcel';
        this.$axios.get(url,data,{headers: {"Content-Type": "multipart/form-data"}}).then(res=>{
             console.log(res.data);
             if(res.data){
             		this.$notify({
             			title: '成功',
             			message: '修改成功',
             			type: 'success'
                });
                this.$router.push('EntrySchoolForm');
             }
            });
      },
      importExcel(){//导入
        this.dialogFormStateAll=true;
      },
      exportExcel(){//导出
         location.href='/stock/ExportExcel';
      },
      handleDelete(row){
        this.$http.get('/stock/delete?id='+row.id).then(response => {
          if(response.bodyText=='true'){
            this.pageUtil();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
          }
        }, response => {
          this.$message('网络错误');
        });
      },
      manyStateUpdate(){
      	this.$router.push('OpenDayActivityAdd');
         // this.stateform={ id: '',state: 0,memo: ''}
         // this.dialogFormStateAll=true;
      },
      manyRowDelete(){
        if(this.tableSelect.length==0){
          this.$notify({
              title: '提示',
              message: '请选择要删除的单据',
              type: 'warning'
            });
          return;
        }
        var newArr=[];
        this.tableSelect.forEach(item => {
          newArr.push(item.id);
        })
        this.$http.get('/stock/delete?id='+newArr.join(',')).then(response => {
          if(response.bodyText=='true'){
            this.tableSelect=[];
            this.pageUtil();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
          }
        }, response => {
          this.$message('网络错误');
        });
      },
      tableAllSelection(selection){
            this.tableSelect=selection;
      },
      tableSelection(selection,row){
            this.tableSelect=selection;
      },
      filterChanger(){
        this.page.pageIndex=0;
          this.pageUtil();
      },
        searchTable(){
          this.page.pageIndex=0;
            this.pageUtil();
        },
      handleEdit(row){

        this.$store.commit('enrollUpdate',row);
        this.$router.push('EntryFormEdit');
      },
        pageUtil(){
          this.$http.get('/stock/QueryStock?page='+this.page.pageIndex+'&pageSize='+this.page.pageSize).then(response => {
            this.tableData = response.body.list;
            console.log(this.tableData);
            this.page.total=response.body.total;
          }, response => {
            this.$message('网络错误');
          });
        },
      /*handleChangeStata(row){
        console.log(row);
        this.stateform.id = row.id;
        this.stateform.memo = row.memo;
        this.stateform.state = row.state;
        this.dialogFormState = true;
      },*/
      handleCurrentChange(val) {
          this.page.pageIndex=val-1;
          this.pageUtil();
      },
      UpdateStateByIdAll(){
        var arr=[];
        for(var index=0;index<this.tableSelect.length;index++){
            var item={
                id:this.tableSelect[index].id,
                state:this.stateform.state,
                memo:this.stateform.memo
            }
            arr.push(item);
        }
        this.$http.post('/Hd-NurseryShool/enroll/UpdateStateById',{paramsModels:arr}).then(response => {
          if(response.bodyText=='success'){
            this.pageUtil();
            this.dialogFormStateAll=false;
            this.$refs.multipleTable.clearSelection();
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            });
          }
        }, response => {
          this.$message('网络错误');
        });
      },
      UpdateStateById(){
          var arr=[];
            arr.push(this.stateform)
        this.$http.post('/Hd-NurseryShool/enroll/UpdateStateById',{paramsModels:arr}).then(response => {
            if(response.bodyText=='success'){
                this.stateform.type=false;
                this.dialogFormState=false;
                this.$refs.multipleTable.clearSelection();
                this.pageUtil();
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success'
              });
            }
        }, response => {
          this.$message('网络错误');
        });
      }
    },
    computed: {
      ctableData(){
        /*for (let index = 0; index < this.tableData.length; index++) {
          switch (this.tableData[index].state) {
            case 0:
              this.tableData[index].cstate = "未审批";
              break;
            case 1:
              this.tableData[index].cstate = "审批通过";
              break;
            case 2:
              this.tableData[index].cstate = "审批未通过";
              break;
          }
          this.loading = false;
        }*/

        return this.tableData;
      }
    },
    created(){
      this.page.pageIndex=0;
      this.pageUtil();
      this.$store.commit("update", [{name: '日常工作', router: '/'}, {name: '原材料隔离跟踪', router: '/EntrySchoolForm'}]);
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .pagination, el-pagination {
    margin-top: 24px;
    width: 500px;
    padding: 0px !important;
  }

  .huadi-table {
    margin-top: 25px;
    text-align: center;
  }

  .operate-right {
    width: 300px;
    /*width:300px;*/
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 55px;
  }
  .marginDia{
    height:20px;
    width:100%;
  }

  .stata-dialog > .form-item{
    margin-top:20px;
  }
  .form-filter-search{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .el-input {
    width: 200px;
    margin-right:10px;
  }

  .entrySchoolForm {
    width: 100%;
    heigth: 100%;
    background: #eaedf1;
  }

  .form-operate {
    height: 70px;
    width: 100%;
    border-radius: 3px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .form-filter {
    height: 100%;
    padding-left: 10px;
    width: 550px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .form-filter-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-form {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-form-item {
    margin-bottom: 0;
  }

</style>
